<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="m1280 f f-j-b center">
			<div class="lefBox">
				<div class="title">
					<div class="titTop">How AI is Evolving</div>
					<div class="time">Aus-09-2023 12:30PM</div>
				</div>
				<div class="avaBox f f-a-c f-j-b">
					<div class="leftIimg f f-a-c"><img src="/src/assets/tou.png" alt="" />Ryan Amacher</div>
					<div class="rigXin f f-a-c">
						<div class="iconItem"><img src="/src/assets/page/1.png" alt="" />27</div>
						<div class="iconItem"><img src="/src/assets/page/12.png" alt="" />9</div>
						<div class="iconItem"><img src="/src/assets/page/7.png" alt="" />Share</div>
						<div class="iconItem"><img src="/src/assets/page/5.png" alt="" />Report</div>
					</div>
				</div>
				<div class="xian"></div>
				<!-- 未付费的内容 -->
				<div v-if="true" class="weiBox">
					<div class="counts">
						In the previous installment, I explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when
						they interacted with AI components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t
						aimed at users or the general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous
						installment, I explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted
						with AI components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or
						the general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them.
					</div>
					<div class="price f f-a-c f-j-c">
						<div class="lefCont f f-a-c f-d-c">
							<div class="read">Read the rest</div>
							<div class="contst">Continue reading for just</div>
							<div class="daola">$5</div>
							<div @click="dwonItem(item)" class="btns hand">Continue</div>
						</div>
						<div class="rigJoin">
							<div class="joinName">Join the club!</div>
							<div class="countss">Unlimited access and read EVERYTHINGPlus FREE first order on Xpert(free consultation)!</div>
							<div class="daolaPri"><span>$22</span>$12/month</div>
							<div @click="dwonItem(item)" class="botBtn hand">Get access</div>
						</div>
					</div>
				</div>
				<!-- 已经付费的内容 -->
				<div v-else class="yiBox">
					<div class="countsss">
						In the previous installment, I explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when
						they interacted with AI components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t
						aimed at users or the general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous
						installment, I explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted
						with AI components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or
						the general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them. In the previous installment, I
						explained that because AI product designers of the past decade intentionally smoothed out the user experience (UX) to ensure that users wouldn’t notice when they interacted with AI
						components, it doesn’t make sense that users were the intended audience for all the buzz about AI back then (and there was a lot of buzz). All that AI talk wasn’t aimed at users or the
						general public. That’s where you’d have found the trendiest AI frenzies of the past decade: with applied AI professionals and those who funded them.
					</div>
				</div>
			</div>
			<div class="rigBox">
				<div class="toptit">You may also like</div>
				<div v-for="(item, index) in 4" :key="index" class="hand boxItem">
					<div class="img">
						<img src="/src/assets/tou.png" alt="" />
					</div>
					<div class="cont">Mastering Datetime Manipulation in Python: A Comprehensive Guide (Asked in Interviews)</div>
					<div class="timeYarn">Aug 10, 2023</div>
				</div>
			</div>
		</div>
		<el-drawer v-model="drawer" title="" :direction="direction" :before-close="handleClose">
			<div class="boxResp">
				<div class="topBoxTit">Order options</div>
				<div class="xian"></div>
				<div class="read">
					<div @click="indQie(1)" class="topSetle hand f f-a-c">
						<img v-if="ind == 1" src="/src/assets/user/gou.png" alt="" />
						<img v-else src="/src/assets/user/weigou.png" alt="" />
						Read the rest
					</div>
					<div class="xian"></div>
					<div class="botOn f f-a-c f-j-b">
						<div class="lefPub">One-time purchase</div>
						<div class="rigPric">$5.05</div>
					</div>
				</div>
				<div class="botJoin">
					<div @click="indQie(2)" class="topSetle hand f f-a-c">
						<img v-if="ind == 2" src="/src/assets/user/gou.png" alt="" />
						<img v-else src="/src/assets/user/weigou.png" alt="" />
						Read the rest
					</div>
					<div class="xian"></div>
					<div class="ul">
						<div class="li f f-a-c">
							<div class="dian"></div>
							Save time & effort with automatic monthly orders
						</div>
						<div class="li f f-a-c">
							<div class="dian"></div>
							Cancel anytime
						</div>
						<div class="li f f-a-c">
							<div class="dian"></div>
							Work long-term with your seller for best results
						</div>
					</div>
					<div class="setMonth">
						<div :class="{ borAct: inds == 1 }" @click="indsQie(1)" class="topThon hand m-b-20 f f-a-c f-j-b">
							<div class="lefPlan">1-month plan</div>
							<div class="rigmonth">$15/month</div>
						</div>
						<div :class="{ borAct: inds == 2 }" @click="indsQie(2)" class="topThon">
							<div class="hand f f-a-c f-j-b">
								<div class="lefPlan">1-month plan</div>
								<div class="rigmonth">$15/month</div>
							</div>
							<div class="lanDao hand m-t-10 f f-a-c f-j-b">
								<div class="lefDao">Save $20.00 (15% OFF)</div>
								<div class="rigDao">avg. per order</div>
							</div>
						</div>
					</div>
				</div>
				<div class="priceZong">
					<div class="topPric">$5.05</div>
					<div class="urchase f f-a-c f-j-b">
						<div class="lef">One-time purchase</div>
						<div class="rig">1 article</div>
					</div>
				</div>
				<div @click="goPay" class="btn hand">Continue ($5.05)</div>
				<div style="width: 100%; height: 80px"></div>
			</div>
		</el-drawer>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let ind = ref(1);
	let inds = ref(0);
	let value = ref("");
	let drawer = ref(false);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const dwonItem = item => {
		drawer.value = true;
	};
	const indsQie = num => {
		if (ind.value == 2) {
			inds.value = num;
		}
	};
	const indQie = num => {
		console.log(num, "5555");
		ind.value = num;
		if (num == 2) {
			inds.value = 1;
		} else {
			inds.value = 0;
		}
	};
	const goPay = () => {
		router.push({
			path: "/BuyOrderPayment"
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
